<!--conf
<sample>
              <product version="2.6" edition="std"/>
                     <modifications>
                            <modified date="100609"/>
                     </modifications>
               </sample>
 -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
	<title>Integration with grid</title>
	
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<link rel="stylesheet" type="text/css" href="../../../codebase/dhtmlx.css"/>
	<script src="../../../codebase/dhtmlx.js"></script>
	
	<style>
		.dhx_axis_item_x{
			font-size: 11px
		}
		.dhx_axis_item_y{
			font-size: 11px
		}
	</style>
	<script>
	var barChart;
	window.onload = function(){
	barChart =  new dhtmlXChart({
		view:"bar",
		color:"#66ccff",
		gradient:"3d",
		container:"chart_container",
	    value:"#data0#",
		label:"#data0#",
		radius:3,
		tooltip:{
			template:"#data0#"
		},
		width:50,
		origin:0,
		yAxis:{
			start:-1000,
			step: 500,
			end:2000	
		},
		group:{
			by:"#data2#",
			map:{
				data0:["#data0#","sum"]
			}
		},
		xAxis:{
			template:"#id#"
		},
		border:false
	});
	
	function refresh_chart(){
		barChart.clearAll();
		barChart.parse(mygrid,"dhtmlxgrid");
	};
	
	mygrid = new dhtmlXGridObject('gridbox');
	mygrid.setImagePath('../../../codebase/imgs/');
	mygrid.setSkin("dhx_skyblue")
	mygrid.enableSmartRendering(true);
	mygrid.loadXML("../../dhtmlxGrid/common/gridH.xml",refresh_chart);
	mygrid.attachEvent("onEditCell",function(stage){
		if (stage == 2)
			refresh_chart();
		return true;
	});
    }
</script>
</head>

<body>
	
	<div id="gridbox" style="width:600px; height:170px; background-color:white;"></div>
	<hr>
	<div id="chart_container" style="width:600px;height:300px;"></div>
	
</body>
</html>
